<template>
  <div class="talk">
    <button @click="getData">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.content }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import { reactive } from 'vue'
  import { nanoid } from 'nanoid';
  import axios from 'axios';
  import { useTalkStore } from '@/store/loveTalk';
  import { storeToRefs } from 'pinia';

  const talkStore = useTalkStore()
  const { talkList } = storeToRefs(talkStore)
  console.log(18, talkStore)

  talkStore.$subscribe((mutate, state) => {
    console.log('talkStore中数据发生了变化', mutate, state)
    localStorage.setItem('talkList', JSON.stringify(state))
  })

  const getData = async () => {
    talkStore.getLoveTalk()
    // const { data } = await axios('https://api.uomg.com/api/rand.qinghua?format=json')
    // console.log(19, data)
    // talkList.push({
    //   id: nanoid(),
    //   content: data.content
    // })
  }
</script>

<style scoped>

</style>